<template>
    <div class="person">
        <h1>中国</h1>
        <!-- <h2 id="title2">深圳</h2> 不建议使用id，因为可能和组件外的id重复 -->
        <h2 ref="title2">深圳</h2>
        <h3>华为</h3>
        <button @click="showLog">点我输出h2这个元素</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import { ref, defineExpose } from 'vue';

    // 创建一个title2，用于存储ref标记的内容
    let title2 = ref();
    let a = ref(0);
    let b = ref(1);
    let c = ref(2);

    function showLog() {
        // console.log(document.getElementById('title2'));
        console.log(title2.value);
    }

    // 向父组件暴漏元素a、b、c，否则父组件看不到这里的a、b、c
    defineExpose({a, b, c});
</script>

<!-- scoped意思是局部样式，避免样式对组件外产生影响。建议无脑加上。 -->
<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
</style>